<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="./libs/layui/css/layui.css">
  <link rel="stylesheet" href="./css/menu.css">
</head>
<body class="layui-box">
	<!-- 顶部导航栏 -->
	<div class="header">
		<!-- <ul class="layui-nav layui-nav-tree" lay-filter="test"> -->
		<ul class="layui-nav layui-layout-right layui-bg-cyan">
			<li class="layui-nav-item">
				<a href="">
					<i class="layui-icon layui-icon-notice"></i>
					&nbsp;&nbsp;消息
					<span class="layui-badge-dot"></span>
				</a>
			</li>
			<li class="layui-nav-item">
				<a href="">
					<i class="layui-icon layui-icon-username"></i>
					&nbsp;&nbsp;用户
				</a>
				<dl class="layui-nav-child">
					<dd><a href="">个人信息</a></dd>
					<dd><a href="">密码修改</a></dd>
					<dd><a href="">退出登录</a></dd>
				</dl>
			</li>
		</ul>
	</div>

	<!-- 侧边菜单栏 -->
	<div class="leftSide">
		<!-- <ul class="layui-nav layui-nav-tree" lay-filter="test"> -->
		<ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-cyan">
			<div class="css-menuLogo">
				Hello World !!!
			</div>
			<li class="layui-nav-item">
				<a href="javascript:;">
					<i class="layui-icon layui-icon-home"></i>
					&nbsp;&nbsp;主页
				</a>
				<dl class="layui-nav-child">
					<dd>
						<a href="javascript:;">最新资讯</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="javascript:;">最新资讯1</a>
								<dl class="layui-nav-child">
									<a href="javascript:;">最新资讯2</a>
									<dl class="layui-nav-child">
										<a href="javascript:;">最新资讯3</a>
										<dl class="layui-nav-child">
											<a href="javascript:;">最新资讯4</a>
											<dl class="layui-nav-child">
												<a href="javascript:;">最新资讯5</a>
												<dl class="layui-nav-child">
													<a href="javascript:;">最新资讯6</a>
													<dl class="layui-nav-child">
														<a href="javascript:;">最新资讯7</a>
														<dl class="layui-nav-child">
															<a href="javascript:;">最新资讯8</a>
														</dl>
													</dl>
												</dl>
											</dl>
										</dl>
									</dl>
								</dl>
							</dd>
						</dl>
					</dd>
					<dd><a href="javascript:;">聊天室</a></dd>
					<dd><a href="javascript:;">每日任务</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="./pages/panel.html" target="mainView">
					<i class="layui-icon layui-icon-template-1"></i>
					&nbsp;&nbsp;面板
				</a>
			</li>
			<!-- 默认展开 -->
			<li class="layui-nav-item layui-nav-itemed">
				<a href="javascript:;">
					<i class="layui-icon layui-icon-layouts"></i>
					&nbsp;&nbsp;表单
				</a>
				<dl class="layui-nav-child">
					<dd><a href="./pages/form.html" target="mainView">输入框</a></dd>
					<dd><a href="./pages/slider.html" target="mainView">滑块</a></dd>
					<dd><a href="./pages/submit.html" target="mainView">数据提交</a></dd>
					<dd><a href="./pages/upload.html" target="mainView">上传文件</a></dd>
					<dd><a href="./pages/laydate.html" target="mainView">日期和时间组件</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="javascript:;">
					<i class="layui-icon layui-icon-component"></i>
					&nbsp;&nbsp;模块功能
				</a>
				<dl class="layui-nav-child">
					<dd><a href="./pages/table.html" target="mainView">表格</a></dd>
					<dd><a href="./pages/progress.html" target="mainView">进度条</a></dd>
					<dd><a href="./pages/carousel.html" target="mainView">轮播</a></dd>
				</dl>
			</li>
		</ul>
	</div>

	<div class="mainView">
		<iframe name="mainView" frameborder=0></iframe>
	</div>

<script src="./libs/layui/layui.js"></script>
<script src="./js/menu.js"></script>
</body>
</html>
